<template>
  <MyBG class="border-keyframes color-bg">
    <div class="center-layout">
      <!-- 图片 -->
      <div class="image-area">
        <div class="image-container"></div>
      </div>
      <!--文字 -->
      <div class="title-area">
        <h1 class="title">欢 迎 使 用</h1>
        <p class="introduce">
          这是一个
          <a href="#" class="special_note"
            >Vue3+Vite+TS+Element Plus+WindCss
          </a>
          项目模板
        </p>
      </div>
      <router-link to="/">
        <el-button type="warning" plain size="large">开始使用</el-button>
      </router-link>
    </div>
  </MyBG>
</template>

<script setup lang="ts">
import { useViewStore } from "@/store/view-store";
import { onMounted } from "vue";
import { useRouter } from "vue-router";

const viewStore = useViewStore();

onMounted((): void => {
  viewStore.set_isWelcome(false); // 更新状态，标记为已进入欢迎页面
});
</script>

<style lang="scss">
.center-layout {
  height: 90%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  // image-area
  .image-area {
    display: flex;
    justify-content: center;

    .image-container {
      width: 100px; /* 容器宽度 */
      height: 100px; /* 容器高度 */
      background-image: url("@assets/kawa.gif"); /* 背景图片 */
      background-size: cover; /* 保证图片不变形且填满容器 */
      background-position: center; /* 图片居中显示 */
    }
  }
  // title-area
  .title-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;

    .title {
      font-weight: 700;
      font-size: 5rem;
      margin-bottom: 20px;
      background: url("@assets/img/彩色混合.png");
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .introduce {
      font-size: 24px;

      .special_note {
        color: rgb(45, 104, 255);
        font-weight: 700;
        text-decoration: underline;
      }
    }
  }
}
// 渐变背景class
.color-bg {
  background-image: linear-gradient(#c4f4fe 0%, #fdefbe 100%);
}
</style>
